<template>
  <view class="login-container">
    <view class="login-header">
      <view class="logo">🤖</view>
      <view class="title">RAG知识问答</view>
      <view class="subtitle">智能问答系统</view>
    </view>

    <view class="login-form">
      <view class="form-item">
        <input 
          class="input" 
          v-model="form.username" 
          placeholder="请输入用户名"
          type="text"
        />
      </view>
      
      <view class="form-item">
        <input 
          class="input" 
          v-model="form.password" 
          placeholder="请输入密码"
          type="password"
        />
      </view>

      <button class="login-btn" @click="handleLogin" :disabled="loading">
        {{ loading ? '登录中...' : '登录' }}
      </button>

      <view class="register-link">
        <text @click="goToRegister">还没有账号？立即注册</text>
      </view>
    </view>

    <view class="login-footer">
      <text class="footer-text">登录后即可使用AI智能问答功能</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      loading: false
    }
  },
  methods: {
    async handleLogin() {
      if (!this.form.username==='admin' || !this.form.password==='123456') {
        uni.showToast({
          title: '请输入用户名和密码',
          icon: 'none'
        })
        return
      }

      this.loading = true
      try {
        const response = await uni.request({
          url: 'http://localhost:5000/api/auth/login',
          method: 'POST',
          data: {
            username: this.form.username,
            password: this.form.password
          }
        })
		

        if (response.statusCode === 200) {
          const { token, user } = response.data
          
          // 保存token和用户信息
          uni.setStorageSync('token', token)
          uni.setStorageSync('userInfo', user)
          
          uni.showToast({
            title: '登录成功',
            icon: 'success'
          })

          // 根据用户角色跳转到不同页面
          setTimeout(() => {
            if (user.role === 'admin') {
              // 管理员跳转到后台管理（需要打开新窗口或提示）
              uni.showModal({
                title: '管理员登录',
                content: '检测到管理员身份，建议使用后台管理系统。是否继续使用移动端？',
                success: (res) => {
                  if (res.confirm) {
                    // 继续使用移动端，跳转到聊天页面
                    uni.switchTab({
                      url: '/pages/chat/index'
                    })
                  } else {
                    // 提示用户使用后台管理
                    uni.showToast({
                      title: '请使用后台管理系统',
                      icon: 'none',
                      duration: 2000
                    })
                  }
                }
              })
            } else {
              // 普通用户直接跳转到聊天页面
              uni.switchTab({
                url: '/pages/chat/index'
              })
            }
          }, 1500)
        } else {
          throw new Error(response.data.error || '登录失败')
        }
      } catch (error) {
        uni.showToast({
          title: error.message || '登录失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },

    goToRegister() {
      uni.navigateTo({
        url: '/pages/auth/register'
      })
    }
  }
}
</script>

<style scoped>
.login-container {
  padding: 60rpx 40rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.login-header {
  text-align: center;
  margin-bottom: 80rpx;
}

.logo {
  font-size: 120rpx;
  margin-bottom: 20rpx;
}

.title {
  font-size: 48rpx;
  font-weight: bold;
  color: white;
  margin-bottom: 10rpx;
}

.subtitle {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.8);
}

.login-form {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20rpx;
  padding: 60rpx 40rpx;
  backdrop-filter: blur(10rpx);
}

.form-item {
  margin-bottom: 40rpx;
}

.input {
  width: 540rpx;
  padding: 30rpx;
  border-radius: 15rpx;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  font-size: 28rpx;
  color: #333;
}

.login-btn {
  width: 100%;
  padding: 30rpx;
  background: #28a745;
  color: white;
  border: none;
  border-radius: 15rpx;
  font-size: 32rpx;
  margin-bottom: 30rpx;
}

.login-btn:disabled {
  background: #ccc;
}

.register-link {
  text-align: center;
}

.register-link text {
  color: white;
  font-size: 28rpx;
  text-decoration: underline;
}

.login-footer {
  text-align: center;
  margin-top: 60rpx;
}

.footer-text {
  color: rgba(255, 255, 255, 0.7);
  font-size: 24rpx;
}
</style> 